<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>演员添加或修改</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/index.css}" rel="stylesheet">
    <link th:href="@{/css/config.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/jquery.pagination.css}" rel="stylesheet">
    <!-- 表单验证 -->
    <link th:href="@{/css/bootstrapValidator.css}" rel="stylesheet">


</head>

<body>
<!-- nav导航 -->
<div th:replace="common/bar::#header"></div>
<!-- 页面主体 -->
<div class="dh mainbox">
    <!-- 左边菜单 -->
    <div th:replace="common/bar::#menu"></div>
        <!-- 右边主显示部分 -->
        <div class="main-rightbox">
            <div class="mainrightbox">
                <!-- 路径导航 -->
                <ol class="breadcrumb">
                    <li><a th:href="@{/}">首页</a></li>
                    <li class="active">基础管理</li>
                    <li class="active">菜单管理</li>
                    <li class="active">增加编辑</li>
                </ol>
                <!-- 网页主体内容部分 -->
                <div class="main_box ioep">
                    <!-- 页面单排显示 -->
                    <!-- 页面双排显示 -->
                    <div class="rows">
                        <div class="col-md-10 col-md-offset-1">
                            <form role="form" class="form-horizontal rows" id="form-test" action="/movie/movie-actor/add" method="post">
                                <div class="form-group col-md-6" style="margin-top: 100px">
                                    <label for="user" class="col-sm-5 control-label">演员名</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" id="user" th:value="${movieActor==null?'':movieActor.name}" name="name" placeholder="请输入演员名" />
                                    </div>
                                </div>
                                <div style="height: 400px;">
                                    <p>
                              <img src="https://catdog-movie.oss-cn-beijing.aliyuncs.com/heapPortrait/default.png"
                                   th:src="${movieActor==null?'https://catdog-movie.oss-cn-beijing.aliyuncs.com/heapPortrait/default.png':movieActor.pictureUrl}"
                                   style="width: 200px;height: 200px" id="headImg"></p>
                                    <p>
                                        <input id="uploadfile" type="file" style="margin-left: 450px"/>
                                    </p>
                                    <p style="font-size:13px;color: burlywood;margin-top: 15px;margin-left: 450px">支持JPG,JPEG,PNG格式,且文件需小于1M</p>
                                </div>
                                <input type="hidden" name="pictureUrl" id="pictureUrl"></input>
                                <input type="hidden" name="id" th:value="${movieActor==null?'':movieActor.id}"></input>
                                <div class="form-group col-md-12">
                                    <div class="col-sm-offset-5 col-sm-2">
                                        <button id="btn-test" type="submit" class="btn btn-primary">提交</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 引入公共js文件 -->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/js/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/modal.js}"></script>
    <script th:src="@{/js/jquery.pagination.min.js}"></script>

    <script>
        $(function () {
            $("#uploadfile").change(function () {
                var file = $("#uploadfile").val();
                if (file != null && file != '') {
                    var str = $("#uploadfile").val().toString();
                    var imgType = str.substr(str.indexOf("."), str.length)
                    //获取oss传输签名
                    $.ajax({
                        url: "/oss/policy/actorPicture",
                        async: false,
                        data: {
                            imgType: imgType
                        },
                        success: function (data) {
                            //保存数据
                            //获得图片文件
                            var request = new FormData();
                            var file = document.getElementById("uploadfile");
                            var filObj = file.files[0];
                            //上传文件参数
                            request.append("key", data.key)
                            request.append("policy", data.policy)
                            request.append("signature", data.signature)
                            request.append("ossaccessKeyId", data.accessid)
                            request.append("dir", data.dir)
                            request.append("host", data.host)
                            request.append("name", data.name)
                            request.append("success_action_status", 200)
                            request.append("file", filObj);

                            //保存图片
                            $.ajax({
                                url: "https://catdog-movie.oss-cn-beijing.aliyuncs.com",
                                enctype: "multipart/form-data",
                                processData: false,
                                cache: false,
                                async: false,
                                contentType: false,
                                type: 'post',
                                data: request,
                                success: function (request) {
                                    $("#headImg").attr("src", data.url);
                                    $("#pictureUrl").val(data.url)
                                }
                            })
                        }
                    })

                } else {
                    alert('请选择文件！');
                }
            })
        })



        /**
         *  此方法为切换左边菜单的js文件
         */
        $(".list_dt").on("click", function() {
            $('.list_dd').stop();
            $(this).siblings("dt").removeAttr("id");
            if ($(this).attr("id") == "open") {
                $(this).removeAttr("id").siblings("dd").slideUp();
            } else {
                $(this).attr("id", "open").next().slideDown().siblings("dd").slideUp();
            }
        });



    </script>
</body>

</html>